
<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />



<img id="picture_id" src="images/open_wall_wall.jpg" alt="Mountain View" style="width:304px;height:228px">
<p>Science Project</p>

<button onclick="goRight()">Right</button>
<button onclick="goLeft()">Left</button>
<button onclick="goDown()">Down</button>
<button onclick="goUp()">Up</button>

<p id="output"></p>

<script>

var x = 0;
var xLast = 0;
var y = 0;
var yLast = 0;

function goRight()
{
	xLast = x;
	x++;
	move();
}

function goLeft()
{
	xLast = x;
	x--;
	move();
} 
function goDown()
{
	xLast = y;
	y--;
	move();
}
function goUp()
{
	xLast = y;
	y++;
	move();
}

function move()
{
	if (x == 0 && y == 0)
	{
    		document.getElementById("picture_id").src = "images/wall_wall_open.jpg";
	}
	if (x == 1 && y == 0)
	{
    		document.getElementById("picture_id").src = "images/open_wall_wall.jpg";
	}
	if (x == 0 && y == 1)
	{
		x = xLast;
		y = yLast;
	}
	document.getElementById("output").innerHTML = 'x:' + x + 'y:' + y;


	if (x == 0 && y == 2)
	{
		x = xLast;
		y = yLast;
	}
	document.getElementById("output").innerHTML = 'x:' + x + 'y:' + y;
	

	if (x == 0 && y == 3) 
	{
		x = xLast;
		y = yLast;
	}
	document.getElementById("output").innerHTML = 'x:' + x + 'y:' + y;
}        










</script>
</body>
</html>
